<!--
 * @Author: your name
 * @Date: 2021-07-08 12:11:44
 * @LastEditTime: 2021-11-08 17:30:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\dataStatistics\dataStatistics.vue
-->
<template>
  <div class="dataStatic">
    <!-- //反馈关闭率 -->

    <section class="sections">
      <el-card shadow="always" :body-style="cardStyle">
        <el-tabs v-model="activeName">
          <el-tab-pane label="反馈关闭率" name="1">
            <!-- <h2>反馈关闭率</h2> -->
            <div class="searchPart">
              <el-form :inline="true" :model="rateForm" ref="rateForm" class="searchForms">
                <el-form-item>
                  <el-button size="small" v-has="'M1105001'" type="primary" @click="rateSearch">统计</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" v-has="'M1105002'" @click="reset('rateForm')">重置</el-button>
                </el-form-item>

                <el-form-item prop="queryDate">
                  <el-select v-model="rateForm.queryDate" filterable>
                    <el-option label="上月" value="LAST_MONTH"></el-option>
                    <el-option label="本月" value="CURRENT_MONTH"></el-option>
                    <el-option label="今年" value="CURRENT_YEAR"></el-option>
                    <el-option label="Q1" value="Q1"></el-option>
                    <el-option label="Q2" value="Q2"></el-option>
                    <el-option label="Q3" value="Q3"></el-option>
                    <el-option label="Q4" value="Q4"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="rateOfValue">
                  <!-- <el-select
                      v-show="selectType == '1'"
                      clearable
                      v-model="rateForm.rateOfValue"
                      filterable
                      placeholder="营销项目名称"
                    >
                      <el-option v-for="(item, index) in commentList" :key="index" :label="item.title" :value="item.id">
                      </el-option>
                    </el-select> -->
                  <!-- <el-form-item prop="markProjectId"> -->
                  <el-select
                    v-show="selectType == '1'"
                    clearable
                    v-model="rateForm.rateOfValue"
                    filterable
                    placeholder="营销项目名称"
                  >
                    <el-option label="全部营销项目名称" value=""></el-option>
                    <el-option v-for="(item, index) in projectList" :key="index" :label="item.title" :value="item.id">
                    </el-option>
                  </el-select>
                  <!-- </el-form-item> -->

                  <el-select
                    v-show="selectType == '2'"
                    clearable
                    v-model="rateForm.rateOfValue"
                    filterable
                    placeholder="反馈来源"
                  >
                    <el-option label="全部反馈来源" value=""></el-option>
                    <el-option v-for="(item, index) in commentList" :key="index" :label="item.title" :value="item.id">
                    </el-option>
                  </el-select>
                  <el-select
                    v-show="selectType == '3'"
                    clearable
                    filterable
                    v-model="rateForm.rateOfValue"
                    placeholder="是否服务请求"
                  >
                    <el-option
                      v-for="(item, index) in commentList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-show="selectType == '4'"
                    clearable
                    filterable
                    v-model="rateForm.rateOfValue"
                    placeholder="影响类别"
                  >
                    <el-option label="全部影响类别" value=""></el-option>
                    <el-option v-for="(item, index) in commentList" :key="index" :label="item.title" :value="item.id">
                    </el-option>
                  </el-select>
                  <el-select
                    v-show="selectType == '5'"
                    clearable
                    filterable
                    v-model="rateForm.rateOfValue"
                    placeholder="请先选择查询字段类别"
                  >
                    <el-option label="请先选择类别" value=""> </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="rateOftype">
                  <el-select v-model="rateForm.rateOftype" @change="changeType" filterable placeholder="字段类别">
                    <el-option label="营销项目" value="MARKET_PROJECT_SECOND"></el-option>
                    <el-option label="反馈来源" value="FEEDBACK_SOURCE"></el-option>
                    <el-option label="是否服务请求" value="IS_SERVER_REQUEST"></el-option>
                    <el-option label="影响类别" value="INFLUENCE_CATEGORY"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="productId">
                  <el-select filterable clearable v-model="rateForm.productId" placeholder="全部产品">
                    <el-option label="全部产品" value=""></el-option>
                    <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div style="width:100%;">
              <div class="chartsBox">
                <div class="box_container">
                  <el-row :gutter="10">
                    <div v-for="(chardata, inds) of echartsDatas1" :key="'sdf' + inds">
                      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="chartsItem">
                        <echartscom
                          :chartType="'normal'"
                          v-if="chardata.data.length > 0"
                          :clickParam="clickParam"
                          :chartData="chardata.data"
                          :legendData="legendData"
                          :echartsStyles="echartsStyles"
                          :optionTitle="chardata.title + chardata.count"
                          :title="chardata.title"
                          autoresize
                        />

                        <div v-else class="emptyDiv">
                          <p class="echartTitles">{{ chardata.title }}</p>
                          <el-empty :image-size="50" style="height:100%;" description="暂无数据"></el-empty>
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已关闭问题统计" name="2">
            <!-- <h2>已关闭问题统计</h2> -->
            <div class="searchPart">
              <el-form :inline="true" :model="questionForm" ref="questionForm" class="searchForms">
                <el-form-item>
                  <el-button size="small" v-has="'M1105004'" type="primary" @click="questionSearch">统计</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" v-has="'M1105005'" @click="reset('questionForm')">重置</el-button>
                </el-form-item>

                <el-form-item prop="queryDate">
                  <el-select v-model="questionForm.queryDate" filterable>
                    <el-option label="本月" value="CURRENT_MONTH"></el-option>
                    <el-option label="本周" value="CURRENT_WEEK"></el-option>
                    <el-option label="上月" value="LAST_MONTH"></el-option>
                    <el-option label="当年" value="CURRENT_YEAR"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="markProjectId">
                  <el-select clearable v-model="questionForm.markProjectId" filterable placeholder="营销项目名称">
                    <el-option label="全部营销项目名称" value=""></el-option>
                    <el-option v-for="(item, index) in projectList" :key="index" :label="item.title" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="productId">
                  <el-select clearable v-model="questionForm.productId" filterable placeholder="全部产品">
                    <el-option label="全部产品" value=""></el-option>
                    <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div class="chartsBox">
              <div class="box_container">
                <el-row :gutter="10">
                  <div v-for="(chardata, inds) of echartsDatas2" :key="'sdf' + inds">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="chartsItem">
                      <echartscom
                        v-if="chardata.data.length > 0"
                        :clickParam="clickParam"
                        :isClick="1"
                        :chartType="'normal'"
                        @changeParms="changeParms"
                        :chartData="chardata.data"
                        :legendData="legendData"
                        :echartsStyles="echartsStyles"
                        :optionTitle="chardata.title + chardata.count"
                        :title="chardata.title"
                        autoresize
                      />
                      <div v-else class="emptyDiv">
                        <p class="echartTitles">{{ chardata.title }}</p>
                        <el-empty :image-size="50" style="height:100%;" description="暂无数据"></el-empty>
                      </div>
                    </el-col>
                  </div>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="未关闭问题统计" name="3">
            <!-- <h2>未关闭问题统计</h2> -->
            <div class="searchPart">
              <el-form :inline="true" :model="statisticForm" ref="statisticForm" class="searchForms">
                <el-form-item>
                  <el-button size="small" type="primary" v-has="'M1105007'" @click="statisticSearch">统计</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" v-has="'M1105008'" @click="reset('statisticForm')">重置</el-button>
                </el-form-item>
                <!-- TODO: 增加时间筛选条件(FYM) -->
                <el-form-item prop="queryDate">
                  <el-select v-model="statisticForm.queryDate" filterable>
                    <el-option label="本月" value="CURRENT_MONTH"></el-option>
                    <el-option label="本周" value="CURRENT_WEEK"></el-option>
                    <el-option label="上月" value="LAST_MONTH"></el-option>
                    <el-option label="当年" value="CURRENT_YEAR"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="markProjectId">
                  <el-select clearable v-model="statisticForm.markProjectId" filterable placeholder="营销项目名称">
                    <el-option label="全部营销项目名称" value=""></el-option>
                    <el-option v-for="(item, index) in projectList" :key="index" :label="item.title" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="productId">
                  <el-select clearable filterable v-model="statisticForm.productId" placeholder="全部产品">
                    <el-option label="全部产品" value=""></el-option>
                    <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div class="chartsBox">
              <div class="box_container">
                <el-row :gutter="10">
                  <div v-for="(chardata, inds) of echartsDatas3" :key="'sdf' + inds">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="chartsItem">
                      <echartscom
                        v-if="chardata.data.length > 0"
                        :chartData="chardata.data"
                        :isClick="2"
                        @changeParms="changeParms"
                        :chartType="'normal'"
                        :legendData="legendData"
                        :echartsStyles="echartsStyles"
                        :optionTitle="chardata.title + chardata.count"
                        :title="chardata.title"
                        autoresize
                      />
                      <div v-else class="emptyDiv">
                        <p class="echartTitles">{{ chardata.title }}</p>
                        <el-empty :image-size="50" style="height:100%;" description="暂无数据"></el-empty>
                      </div>
                    </el-col>
                  </div>
                </el-row>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="处理时长" name="4">
            <!-- <h2>处理时长</h2> -->
            <div class="searchPart">
              <el-form :inline="true" :model="handleForm" ref="handleForm" class="searchForms">
                <el-form-item>
                  <el-button size="small" v-has="'M1105010'" type="primary" @click="handleSearch">统计</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" v-has="'M1105011'" @click="reset('handleForm')">重置</el-button>
                </el-form-item>

                <el-form-item>
                  <el-col :span="12">
                    <el-form-item prop="endTime">
                      <el-date-picker
                        type="date"
                        :clearable="false"
                        :editable="false"
                        format="yyyy-MM-dd"
                        :picker-options="endDatePicker"
                        value-format="yyyy-MM-dd"
                        placeholder="选择结束时间"
                        v-model="handleForm.endTime"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item prop="startTime">
                      <el-date-picker
                        type="date"
                        :clearable="false"
                        :editable="false"
                        format="yyyy-MM-dd"
                        :picker-options="startDatePicker"
                        value-format="yyyy-MM-dd"
                        placeholder="选择开始时间"
                        v-model="handleForm.startTime"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item prop="markProjectId">
                  <el-select clearable filterable v-model="handleForm.markProjectId" placeholder="营销项目名称">
                    <el-option label="全部营销项目名称" value=""></el-option>
                    <el-option v-for="(item, index) in projectList" :key="index" :label="item.title" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="productId">
                  <el-select clearable filterable v-model="handleForm.productId" placeholder="全部产品">
                    <el-option label="全部产品" value=""></el-option>
                    <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <div style="width:100%;">
              <!-- echarts -->
              <div class="chartsBox">
                <div class="box_container">
                  <el-row :gutter="10">
                    <div v-for="(chardata, inds) of echartsDatas4" :key="'sdf' + inds">
                      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="chartsItem">
                        <echartscom
                          v-if="chardata.data.length > 0"
                          :chartData="chardata.data"
                          :legendData="legendData"
                          :chartType="chardata.type"
                          :echartsStyles="echartsStyles"
                          :optionTitle="chardata.title + chardata.count"
                          :title="chardata.title"
                          autoresize
                        />
                        <div v-else class="emptyDiv">
                          <p class="echartTitles">{{ chardata.title }}</p>
                          <el-empty :image-size="50" style="height:100%;" description="暂无数据"></el-empty>
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                </div>
              </div>
              <!-- echarts -->
              <!-- table -->
              <el-table class="typeTable" :data="C1table" v-loading="C1tableLoading" style="width: 100%">
                <el-table-column label="C1表" align="center">
                  <el-table-column prop="close" align="center" label="状态" class-name="cells">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.close ? '已关闭' : '未关闭' }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="feedBackCount" label="总计" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.feedBackCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '1')" class="link-type">{{
                        scope.row.feedBackCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessTenCount" label="0~10天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessTenCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '1')" class="link-type">{{
                        scope.row.lessTenCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessTwentyCount" label="11~20天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessTwentyCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '1')" class="link-type">{{
                        scope.row.lessTwentyCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessThirtyCount" label="21~30天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessThirtyCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '1')" class="link-type">{{
                        scope.row.lessThirtyCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessSixtyCount" label="31~60天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessSixtyCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '1')" class="link-type">{{
                        scope.row.lessSixtyCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessNinetyCount" label="61~90天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessNinetyCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '1')" class="link-type">{{
                        scope.row.lessNinetyCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="moreNineCount" label="90天以上" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.moreNineCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '1')" class="link-type">{{
                        scope.row.moreNineCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="avgDuration" label="平均处理时长(天)" align="center"> </el-table-column>
                </el-table-column>
              </el-table>
              <el-table :data="C2table" v-loading="C2tableLoading" class="typeTable" style="width: 100%">
                <el-table-column label="C2表" align="center">
                  <el-table-column prop="close" align="center" label="状态" class-name="cells">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.close ? '已关闭' : '未关闭' }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="feedBackCount" label="总计" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.feedBackCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '2')" class="link-type">{{
                        scope.row.feedBackCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessTenCount" label="0~10天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessTenCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '2')" class="link-type">{{
                        scope.row.lessTenCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessTwentyCount" label="11~20天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessTwentyCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '2')" class="link-type">{{
                        scope.row.lessTwentyCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessThirtyCount" label="21~30天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessThirtyCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '2')" class="link-type">{{
                        scope.row.lessThirtyCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessSixtyCount" label="31~60天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessSixtyCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '2')" class="link-type">{{
                        scope.row.lessSixtyCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessNinetyCount" label="61~90天" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.lessNinetyCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '2')" class="link-type">{{
                        scope.row.lessNinetyCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="moreNineCount" label="90天以上" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.close">{{ scope.row.moreNineCount }}</span>
                      <span v-else @click="switchDetail(scope.column, '2')" class="link-type">{{
                        scope.row.moreNineCount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="avgDuration" label="平均处理时长(天)" align="center"> </el-table-column>
                </el-table-column>
              </el-table>
              <!-- table -->
            </div>
            <div style="width:100%;">
              <div class="chartsBox">
                <div class="box_container"></div>
              </div></div
          ></el-tab-pane>
          <el-tab-pane label="回退情况统计" name="5">
            <!-- <h2>回退情况统计</h2> -->
            <div class="searchPart">
              <el-form :inline="true" :model="backSituationForm" ref="backSituationForm" class="searchForms">
                <el-form-item>
                  <el-button size="small" v-has="'M1105013'" type="primary" @click="situationSearch">统计</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" v-has="'M1105014'" @click="reset('backSituationForm')">重置</el-button>
                </el-form-item>

                <el-form-item>
                  <el-col :span="12">
                    <el-form-item prop="endTime">
                      <el-date-picker
                        type="date"
                        :clearable="false"
                        :editable="false"
                        format="yyyy-MM-dd"
                        :picker-options="endDatePicker2"
                        value-format="yyyy-MM-dd"
                        placeholder="选择结束时间"
                        v-model="backSituationForm.endTime"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item prop="startTime">
                      <el-date-picker
                        type="date"
                        :clearable="false"
                        :editable="false"
                        format="yyyy-MM-dd"
                        :picker-options="startDatePicker2"
                        value-format="yyyy-MM-dd"
                        placeholder="选择开始时间"
                        v-model="backSituationForm.startTime"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item prop="markProjectId">
                  <el-select clearable filterable v-model="backSituationForm.markProjectId" placeholder="营销项目名称">
                    <el-option label="全部营销项目名称" value=""></el-option>

                    <el-option v-for="(item, index) in projectList" :key="index" :label="item.title" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item prop="productId">
                  <el-select clearable filterable v-model="backSituationForm.productId" placeholder="全部产品">
                    <el-option label="全部产品" value=""></el-option>
                    <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <!-- <div style="width:100%;">
                <el-table class="typeTable"    :data="getBackTable" v-loading="getBackTableLoading" style="width: 100%">
                  <el-table-column label="C1表" align="center">
                    <el-table-column prop="text" align="center" label="回退/激活" class-name="cells"></el-table-column>
                    <el-table-column prop="allCount" label="回退/激活 0次" align="center"> </el-table-column>
                    <el-table-column prop="one" label="回退/激活 1次" align="center"> </el-table-column>
                    <el-table-column prop="two" label="回退/激活 2次" align="center"> </el-table-column>
                    <el-table-column prop="three" label="回退/激活 3次" align="center"> </el-table-column>
                    <el-table-column prop="moreThree" label="回退/激活 3次以上" align="center"> </el-table-column>
                    <el-table-column prop="count" label="回退/激活 问题总数" align="center"> </el-table-column>
                    <el-table-column prop="rate" label="回退/激活 问题占比" align="center"> </el-table-column>
                  </el-table-column>
                </el-table>
              </div> -->
            <div style="width:100%;">
              <el-table class="typeTable" :data="getBackTable" v-loading="getBackTableLoading" style="width: 100%">
                <el-table-column label="C1表" align="center">
                  <el-table-column prop="text" align="center" label="回退/激活" class-name="cells"></el-table-column>
                  <el-table-column prop="zero" label="回退/激活 0次" align="center">
                    <template slot-scope="scope">
                      <span @click="switchDetail(scope.column, '3', scope.$index)" class="link-type">{{
                        scope.row.zero
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="one" label="回退/激活 1次" align="center">
                    <template slot-scope="scope">
                      <span @click="switchDetail(scope.column, '3', scope.$index)" class="link-type">{{
                        scope.row.one
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="two" label="回退/激活 2次" align="center">
                    <template slot-scope="scope">
                      <span @click="switchDetail(scope.column, '3', scope.$index)" class="link-type">{{
                        scope.row.two
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="three" label="回退/激活 3次" align="center">
                    <template slot-scope="scope">
                      <span @click="switchDetail(scope.column, '3', scope.$index)" class="link-type">{{
                        scope.row.three
                      }}</span>
                    </template></el-table-column
                  >
                  <el-table-column prop="moreThree" label="回退/激活 3次以上" align="center">
                    <template slot-scope="scope">
                      <span @click="switchDetail(scope.column, '3', scope.$index)" class="link-type">{{
                        scope.row.moreThree
                      }}</span>
                    </template></el-table-column
                  >
                  <el-table-column prop="count" label="回退/激活 问题总数" align="center">
                    <template slot-scope="scope">
                      <span @click="switchDetail(scope.column, '3', scope.$index)" class="link-type">{{
                        scope.row.count
                      }}</span>
                    </template></el-table-column
                  >
                  <el-table-column prop="rate" label="回退/激活 问题占比" align="center"> </el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </section>
    <!-- //反馈关闭率 -->
    <!-- //已关闭问题统计 -->
    <!-- <section class="sections">
      <el-card shadow="always"> </el-card>
    </section> -->
    <!-- //已关闭问题统计 -->
    <!-- //未关闭问题统计 -->

    <!-- <section class="sections">
      <el-card shadow="always"> </el-card>
    </section> -->
    <!-- //未关闭问题统计 -->
    <!-- //处理时长 -->
    <!-- <section class="sections">
      <el-card shadow="always"> </el-card>
    </section> -->
    <!-- //处理时长 -->
    <!-- //回退情况统计 -->
    <!-- <section class="sections">
      <el-card shadow="always"> </el-card>
    </section> -->
    <!-- //回退情况统计 -->
  </div>
</template>

<script>
// var option;
import { FeedBack } from '@/api/feedBack/server'
import echartscom from '@/components/echartsCome/echartsCome.vue'
import { DataStatistics } from '../../api/dataStatistics/server'

export default {
    name: '',
    components: {
        echartscom
    },
    props: {},
    data() {
        return {
            activeName: '1',
            ProductList: [],
            commentList: [],
            projectList: [],
            selectType: '1',
            selectType2: '1',
            notEmpty: false,
            clickParam: {},
            defaultTitle: {},
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
            startDatePicker2: this.beginDate2(),
            endDatePicker2: this.processDate2(),
            echartsStyles: {
                height: '500px',
                width: '620px'
            },
            titles1: '反馈关闭率',
            optionTitle1: {
                text: '反馈关闭率'
            },
            legendData: [],

            rateForm: {
                productId: '',
                queryDate: 'CURRENT_MONTH',
                rateOfValue: '',
                rateOftype: 'MARKET_PROJECT_SECOND'
            },
            questionForm: {
                productId: '',
                markProjectId: '',
                queryDate: 'CURRENT_MONTH'
            },
            statisticForm: {
                queryDate: 'CURRENT_MONTH',
                productId: '',
                markProjectId: ''
            },
            handleForm: {
                queryDate: 'NIL',
                productId: '',
                markProjectId: '',
                startTime: '',
                endTime: ''
            },
            backSituationForm: {
                queryDate: 'NIL',
                productId: '',
                markProjectId: '',
                startTime: '',
                endTime: ''
            },
            C1table: [],
            C2table: [],
            C1tableLoading: false,
            C2tableLoading: false,
            getBackTable: [],
            getBackTableLoading: false,
            echartsDatas1: {
                chart1: {
                    count: '',
                    title: 'C1反馈关闭率',
                    data: []
                },
                chart2: {
                    count: '',
                    title: 'C2反馈关闭率',
                    data: []
                }
            },
            echartsDatas2: {
                chart1: {
                    count: 0,
                    title: 'C1关闭原因统计总数:',
                    data: []
                },
                chart2: {
                    count: 0,
                    title: 'C1解决方案统计总数:',
                    data: []
                },
                chart3: {
                    count: 0,
                    title: 'C2已关闭总数:',
                    data: []
                }
            },
            echartsDatas3: {
                chart1: {
                    count: 0,
                    title: 'C1反馈状态总数:',
                    data: []
                },
                chart2: {
                    count: 0,
                    title: 'C1处理阶段总数:',
                    data: []
                },
                chart3: {
                    count: 0,
                    title: 'C1营销项目名称总数:',
                    data: []
                },
                chart4: {
                    count: 0,
                    title: 'C2未关闭状态总数:',
                    data: []
                }
            },
            echartsDatas4: {
                chart1: {
                    count: '',
                    title: 'C1已关闭阶段处理时长',
                    type: 'time',
                    data: []
                },
                chart2: {
                    count: '',
                    type: 'time',
                    title: 'C1已关闭部门处理时长',
                    data: []
                },
                chart3: {
                    count: '',
                    type: 'time',
                    title: 'C2已关闭部门处理时长',
                    data: []
                },
                chart4: {
                    count: '',
                    type: 'time',
                    title: '反馈来源统计',
                    data: []
                }
            },
            cardStyle: {
                height: '100%'
            },
            dayRangeArr: [
                {
                    name: 'feedBackCount',
                    excelName: '未关闭处理时长总计',
                    beginDay: 0,
                    endDay: 100000
                },
                {
                    name: 'lessTenCount',
                    excelName: '未关闭处理时长0-10天',
                    beginDay: 0,
                    endDay: 11
                },
                {
                    name: 'lessTwentyCount',
                    excelName: '未关闭处理时长11-20天',
                    beginDay: 11,
                    endDay: 21
                },
                {
                    name: 'lessThirtyCount',
                    excelName: '未关闭处理时长21-30天',

                    beginDay: 21,
                    endDay: 31
                },
                {
                    name: 'lessSixtyCount',
                    excelName: '未关闭处理时长31-60天',

                    beginDay: 31,
                    endDay: 61
                },
                {
                    name: 'lessNinetyCount',
                    excelName: '未关闭处理时长61-90天',

                    beginDay: 61,
                    endDay: 91
                },
                {
                    name: 'moreNineCount',
                    excelName: '未关闭处理时长90天以上',

                    beginDay: 91,
                    endDay: 100000
                }
                // /'总计', '0~10天', '11~20天', '21~30天', '31~60天', '61~90天', '90天以上'
            ],
            dayRangeArr2: [
                {
                    name: 'zero',
                    excelName: '回退情况C1环激活0次',
                    beginCount: 0,
                    endCount: 0
                },
                {
                    name: 'one',
                    excelName: '回退情况C1环激活1次',
                    beginCount: 1,
                    endCount: 1
                },
                {
                    name: 'two',
                    excelName: '回退情况C1环激活2次',
                    beginCount: 2,
                    endCount: 2
                },
                {
                    name: 'three',
                    excelName: '回退情况C1环激活3次',
                    beginCount: 3,
                    endCount: 3
                },
                {
                    name: 'moreThree',
                    excelName: '回退情况C1环激活3次以上',
                    beginCount: 4,
                    endCount: 10000
                },
                {
                    name: 'count',
                    excelName: '回退情况C1环激活总数',
                    beginCount: 1,
                    endCount: 10000
                }
                // /'总计', '0~10天', '11~20天', '21~30天', '31~60天', '61~90天', '90天以上'
            ]
        }
    },
    mounted() {
        this.getCurrentMonth()
        this.getProductList()
        this.getMarketProjectFirstList('MARKETING_PROJECT_BIG') // 营销项目
        this.getMarketProjectFirstList('MARKETING_PROJECT_NAME') // 营销项目名称
        this.rateSearch()
        this.questionSearch()
        this.statisticSearch()
        this.handleSearch()
        this.situationSearch()
    },
    methods: {
        getCurrentMonth(value = null, separate = '-') {
            // 如果为null,则格式化当前时间
            if (!value) value = Number(new Date())
            // 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
            if (value.toString().length == 10) value *= 1000
            value = +new Date(Number(value))

            const targetTime = new Date(value)
            const year = targetTime.getFullYear()
            let month = targetTime.getMonth() + 1
            if (month < 10) {
                month = '0' + month
            }
            const yDate = new Date(year, month, 0)
            const startDateTime = year + separate + month + separate + '01' // 这个月第一天
            const endDateTime = year + separate + month + separate + yDate.getDate() // 这个月最后一天
            this.backSituationForm.startTime = startDateTime
            this.handleForm.startTime = startDateTime
            this.backSituationForm.endTime = endDateTime
            this.handleForm.endTime = endDateTime
        },

        switchDetail(column, ctype, index) {
            console.log(column, ctype, index + 1)
            let beginDay = ''
            let endDay = ''
            let beginCount = ''
            let endCount = ''
            let excelName = ''
            if (ctype == '1' || ctype == '2') {
                this.dayRangeArr.forEach(element => {
                    if (element.name == column.property) {
                        beginDay = element.beginDay
                        endDay = element.endDay
                        excelName = element.excelName
                    }
                })
                this.handleForm.closeFeedBack = false
                this.handleForm.beginDay = beginDay
                this.handleForm.endDay = endDay
                this.handleForm.excelName = excelName

                this.handleForm.ctype = ctype
                this.handleForm.type = 'FEEDBACK_TABLE_DURATION'

                this.$router.push({
                    name: '/dataStaticDetail',
                    query: {
                        data: JSON.stringify(this.handleForm),
                        type: 'FEEDBACK_TABLE_DURATION',
                        ctype: ctype,
                        currentName: this.activeName
                    }
                })
            } else {
                this.dayRangeArr2.forEach(element => {
                    if (element.name == column.property) {
                        beginCount = element.beginCount
                        endCount = element.endCount
                        excelName = element.excelName
                    }
                })
                this.backSituationForm.closeFeedBack = true
                this.backSituationForm.beginCount = beginCount
                this.backSituationForm.endCount = endCount
                this.backSituationForm.excelName = excelName
                this.backSituationForm.queryType = index + 1

                this.backSituationForm.ctype = ctype
                this.backSituationForm.type = 'FEEDBACK_TABLE_DURATION'

                this.$router.push({
                    name: '/dataStaticDetail',
                    query: {
                        data: JSON.stringify(this.backSituationForm),
                        type: 'FEEDBACK_TABLE_DURATION',
                        ctype: ctype,
                        currentName: this.activeName
                    }
                })
            }
        },

        // TODO: 筛选时间初始化(FYM)
        // 字段类别切换
        changeType(v) {
            console.log(v)
            this.commentList = []
            this.selectType = ''
            this.rateForm.rateOfValue = ''
            if (v == 'MARKET_PROJECT_SECOND') {
                // 营销项目
                // SOURCE_FEEDBACK
                this.selectType = '1'
                this.getMarketProjectFirstList('MARKETING_PROJECT_BIG')
            } else if (v == 'FEEDBACK_SOURCE') {
                this.selectType = '2'
                // 反馈来源
                this.getMarketProjectFirstList('SOURCE_FEEDBACK')
            } else if (v == 'IS_SERVER_REQUEST') {
                // 是否服务请求
                this.selectType = '3'
                this.commentList = [
                    { label: '是', value: true },
                    { label: '否', value: false }
                ]
            } else if (v == 'INFLUENCE_CATEGORY') {
                // 影响类别
                this.selectType = '4'
                console.log('44444444')
                this.getMarketProjectFirstList('IMPACT_CATEGORY')
                //
            } else {
                this.selectType = '5'
            }
        },
        // 营销项目/营销项目名称请求函数
        async getMarketProjectFirstList(type) {
            try {
                const result = await FeedBack.FormOptionGetListItemAsync({
                    type: type
                })
                if (result.success) {
                    if (type == 'MARKETING_PROJECT_NAME') {
                        this.projectList = result.data
                    } else {
                        this.commentList = result.data
                    }
                    console.log('M', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        // 获取所有产品信息
        async getProductList() {
            try {
                const result = await FeedBack.ProInsertAsync()
                if (result.success) {
                    this.ProductList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 反馈关闭率
        // C1反馈关闭率
        async FeedBackClosingRate(_data) {
            try {
                const result = await DataStatistics.FeedBackClosingRate(_data)
                if (result.success) {
                    console.log(result.data)
                    console.log('Success')
                    this.echartsDatas1.chart1.data = result.data
                    // this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C2反馈关闭率
        async TaskClosingRate(_data) {
            try {
                const result = await DataStatistics.TaskClosingRate(_data)
                if (result.success) {
                    console.log(result.data)
                    console.log('Success')
                    this.echartsDatas1.chart2.data = result.data
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 已关闭问题统计
        // C1 反馈关闭原因
        async FeedBackReason(_data) {
            try {
                const result = await DataStatistics.FeedBackReason(_data)
                if (result.success) {
                    console.log(result.data)
                    console.log('Success')
                    this.echartsDatas2.chart1.data = result.data.statisticsItemList
                    this.echartsDatas2.chart1.count = result.data.statisticCount

                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C1解决方案统计
        async FeedBackSolution(_data) {
            try {
                const result = await DataStatistics.FeedBackSolution(_data)
                if (result.success) {
                    console.log(result.data)
                    console.log('Success')
                    this.echartsDatas2.chart2.data = result.data.statisticsItemList
                    this.echartsDatas2.chart2.count = result.data.statisticCount

                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C2 反馈关闭原因
        async TaskCloseReason(_data) {
            try {
                const result = await DataStatistics.TaskCloseReason(_data)
                if (result.success) {
                    this.echartsDatas2.chart3.data = result.data.statisticsItemList
                    this.echartsDatas2.chart3.count = result.data.statisticCount

                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },

        // 未关闭问题统计---------------------
        // C1反馈状态
        async C1FeedBackStage(_data) {
            try {
                const result = await DataStatistics.C1FeedBackStage(_data)
                if (result.success) {
                    this.echartsDatas3.chart2.data = result.data.statisticsItemList
                    this.echartsDatas3.chart2.count = result.data.statisticCount
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C1处理阶段
        async C1FeedBackStatus(_data) {
            try {
                const result = await DataStatistics.C1FeedBackStatus(_data)
                if (result.success) {
                    this.echartsDatas3.chart1.data = result.data.statisticsItemList
                    this.echartsDatas3.chart1.count = result.data.statisticCount

                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C1 未关闭营销产品名
        async MarkProjectName(_data) {
            try {
                const result = await DataStatistics.MarkProjectName(_data)
                if (result.success) {
                    this.echartsDatas3.chart3.data = result.data.statisticsItemList
                    this.echartsDatas3.chart3.count = result.data.statisticCount
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C2状态总数
        async C2tate(_data) {
            try {
                const result = await DataStatistics.C2tate(_data)
                if (result.success) {
                    this.echartsDatas3.chart4.data = result.data.statisticsItemList
                    this.echartsDatas3.chart4.count = result.data.statisticCount
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 处理时长
        // C1阶段处理时长
        async FeedBackStageDuration(_data) {
            try {
                const result = await DataStatistics.FeedBackStageDuration(_data)
                if (result.success) {
                    result.data.forEach(element => {
                        if (element.value) {
                            element.value = Math.ceil(element.value / 60)
                        }
                    })
                    this.echartsDatas4.chart1.data = result.data
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C1已关闭格部门处理时长
        async FeedBackDepDuration(_data) {
            try {
                const result = await DataStatistics.FeedBackDepDuration(_data)
                if (result.success) {
                    result.data.forEach(element => {
                        if (element.value) {
                            element.value = Math.ceil(element.value / 60)
                        }
                    })
                    this.echartsDatas4.chart2.data = result.data
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C2已关闭格部门处理时长
        async TaskDepDuration(_data) {
            try {
                const result = await DataStatistics.TaskDepDuration(_data)
                if (result.success) {
                    result.data.forEach(element => {
                        if (element.value) {
                            element.value = Math.ceil(element.value / 60)
                        }
                    })
                    this.echartsDatas4.chart3.data = result.data
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        async FEEDBACK_SOURCEDuration(_data) {
            try {
                const result = await DataStatistics.FeedBackSourceDuration(_data)
                if (result.success) {
                    result.data.forEach(element => {
                        if (element.value) {
                            element.value = Math.ceil(element.value / 60)
                        }
                    })
                    this.echartsDatas4.chart4.data = result.data
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },

        // 表格
        // C1已关闭阶段处理时长
        async FeedBackC1DurationTable(_data) {
            try {
                const result = await DataStatistics.FeedBackC1DurationTable(_data)
                if (result.success) {
                    this.C1tableLoading = true
                    setTimeout(() => {
                        this.C1table = result.data
                        this.C1tableLoading = false
                    }, 1000)

                    // this.echartsDatas4.chart1.data = result.data;
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // C2已关闭阶段处理时长
        async FeedBackC2DurationTable(_data) {
            try {
                const result = await DataStatistics.FeedBackC2DurationTable(_data)
                if (result.success) {
                    this.C2tableLoading = true
                    setTimeout(() => {
                        this.C2table = result.data
                        this.C2tableLoading = false
                    }, 1000)

                    // this.echartsDatas4.chart1.data = result.data;
                    //  this.drawCharts();
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 回退情况统计接口
        async GoBackCount(_data) {
            try {
                const result = await DataStatistics.GoBackCount(_data)
                if (result.success) {
                    this.getBackTableLoading = true
                    setTimeout(() => {
                        this.getBackTableLoading = false
                        this.getBackTable = result.data
                    }, 1000)
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 详情跳转
        changeParms(datas, type) {
            this.clickParam = datas
            console.log(datas)
            console.log(type)
            if (type == 1) {
                this.$router.push({
                    name: '/dataStaticDetail',
                    query: {
                        data: datas.data,
                        markProjectId: this.questionForm.markProjectId,
                        productId: this.questionForm.productId,
                        queryDate: this.questionForm.queryDate,
                        type: datas.type,
                        currentName: this.activeName
                    }
                })
            } else {
                this.$router.push({
                    name: '/dataStaticDetail',
                    query: {
                        data: datas.data,
                        markProjectId: this.statisticForm.markProjectId,
                        productId: this.statisticForm.productId,
                        queryDate: this.statisticForm.queryDate,
                        type: datas.type,
                        currentName: this.activeName
                    }
                })
            }

            // statisticForm
            // this.$router.push({
            //     name: '/dataStaticDetail',
            //     query: {
            //         data: datas.data,
            //         markProjectId: this.questionForm.markProjectId,
            //         productId: this.questionForm.productId,
            //         queryDate: this.questionForm.queryDate,
            //         type: datas.type,
            //         currentName: this.activeName
            //     }
            // })
        },
        // 表单重置
        reset(formName) {
            this.$refs[formName].resetFields()
            // if (formName == 'rateForm') {
            //     this.rateSearch()
            // } else if (formName == 'questionForm') {
            //     this.questionSearch()
            // } else if (formName == 'statisticForm') {
            //     this.getCurrentMonth()
            //     this.statisticSearch()
            // } else if (formName == 'handleForm') {
            //     this.getCurrentMonth()
            //     this.handleSearch()
            // } else {
            //     this.getCurrentMonth()
            //     this.situationSearch()
            // }
        },
        // 反馈关闭率搜索
        rateSearch() {
            this.FeedBackClosingRate(this.rateForm)
            this.TaskClosingRate(this.rateForm)
        },
        // 已关闭问题统计搜索
        questionSearch() {
            this.FeedBackReason(this.questionForm)
            this.TaskCloseReason(this.questionForm)
            this.FeedBackSolution(this.questionForm)
        },
        // 未关闭问题统计搜索
        statisticSearch() {
            // statisticForm

            this.C1FeedBackStage(this.statisticForm)
            this.C1FeedBackStatus(this.statisticForm)
            this.MarkProjectName(this.statisticForm)
            this.C2tate(this.statisticForm)
        },
        // 处理时长搜索
        handleSearch() {
            this.TaskDepDuration(this.handleForm)
            this.FeedBackDepDuration(this.handleForm)
            this.FeedBackStageDuration(this.handleForm)
            this.FEEDBACK_SOURCEDuration(this.handleForm)
            this.FeedBackC1DurationTable(this.handleForm)
            this.FeedBackC2DurationTable(this.handleForm)
        },
        // 回退情况统计搜索
        situationSearch() {
            this.GoBackCount(this.backSituationForm)
        },
        // 开始时间处理函数
        beginDate() {
            const self = this
            return {
                disabledDate(time) {
                    if (self.handleForm.endTime) {
                        // 如果结束时间不为空，则小于结束时间
                        return new Date(self.handleForm.endTime).getTime() < time.getTime()
                    } else {
                        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            }
        },
        // 结束时间处理函数
        processDate() {
            const self = this
            return {
                disabledDate(time) {
                    if (self.handleForm.startTime) {
                        // 如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.handleForm.startTime).getTime() > time.getTime()
                    } else {
                        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            }
        },
        beginDate2() {
            const self = this
            return {
                disabledDate(time) {
                    if (self.backSituationForm.endTime) {
                        // 如果结束时间不为空，则小于结束时间
                        return new Date(self.backSituationForm.endTime).getTime() < time.getTime()
                    } else {
                        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            }
        },
        processDate2() {
            const self = this
            return {
                disabledDate(time) {
                    if (self.backSituationForm.startTime) {
                        // 如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.backSituationForm.startTime).getTime() > time.getTime()
                    } else {
                        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
.dataStatic {
  padding: 30px;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;

  .sections {
    .el-card {
      height: 100%;
      .searchPart {
        height: 33px;
      }
      .chartsBox {
        width: 100%;

        .box_container {
          width: 100%;
          display: inline-block;

          .chartsItem {
            position: relative;
            display: flex;
            justify-content: center;
          }
        }
      }
    }
    .searchForms {
      div {
        float: right;
      }
    }
  }
}
.chartsItem::after {
  content: '';
  display: block;
  width: 2px;
  height: 150px;
  border-right: 2px solid #dcdde0;
  position: absolute;
  right: 0;
  top: 50px;
}
.chartsItem:last-child::after {
  content: '';
  display: none;
}
::v-deep .el-table--enable-row-transition .el-table__body .cells:first-of-type {
  background: #f5f7fa !important;
}
.typeTable {
  width: 100%;
  margin-top: 20px;
}
.emptyDiv {
  width: 420px;
  height: 300px;
  position: relative;
  .echartTitles {
    font-size: 17px;
    text-indent: 8px;
  }
  h3 {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.link-type,
.link-type:focus {
  color: rgb(32, 160, 255);
  cursor: pointer;
  text-decoration: underline;
  &:hover {
    color: #337ab7;
  }
}
</style>
